<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <!-- 第一章 vue初探/1-2初学编程写Hello world 和content -->
</body>
<script>
    // Vue.createApp({
    //     //template模板
    //     template:'<div>Hello world</div>'
    // }).mount('#root')
    // // 只作用于root中使用


    Vue.createApp({
        data(){
            return{
            content:1//变量  在页面上展示为1
            }
        },
        // 页面加载完成后加载mounted中的内容
        mounted() {
            console.log('mounted')//自动执行
            // 定义一个定时器
            setInterval(()=>{
                this.$data.content+=1;  //也可以简写为 this.content
            },1000)//每隔一秒会加1
        },
        //template模板
        template:'<div>{{content}}</div>'
    }).mount('#root')
    // 只作用于root中使用
</script>
</html>